<template>
	<view class="confirm">
		<view class="top">
			<image src="../../static/tabsIcon/youzhan.png" mode=""></image>
			<view class="top_content">
				<view class="top_top">
					<view class="name">
						{{gasName}}
					</view>
					<!-- 	<view class="address">
						潍坊市奎文区XX路与XX街交汇处东50米
					</view> -->
				</view>
				<view class="price_box">
					<view class="vip_price">
						<text class="title">加油价</text>
						<text class="red">{{price}}</text>
					</view>
					<view class="vip_price">
						<text class="title">枪价</text>
						<text class="red">{{yuanp}}</text>
					</view>
					<view class="vip_price">
						<text class="title">国标价</text>
						<text class="red">{{priceOfficial}}</text>
					</view>
					<!-- <view class="nor_price">
						￥{{}}
					</view> -->
					
				</view>
			</view>
		</view>

		<view class="content">
			<view class="title">
				油号
			</view>
			<view class="list">
				<view v-for="(item,index) in numlist" :class="act1==index?'act':'item'" @click="tabs(index)">
					{{item.oilName}}
				</view>
			</view>
		</view>

		<view class="content">
			<view class="title">
				枪号
			</view>
			<view class="list">
				<view v-for="(item,index) in guylist" :class="act2==item.gunNo?'act':'item'" @click="tabs2(item.gunNo)">
					{{item.gunNo}}号
				</view>
			</view>
		</view>

		<view class="btn_box">
			<view @click="gopay" class="btn">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSecretCode,
		getGasInfoList
	} from '@/api/orderlist'
	export default {
		data() {
			return {
				act1: 0,
				act2: 0,
				younum: 0,
				guynum: 0,
				code: '',
				zhid: '',
				numlist: [],
				guylist: [],
				tabslist: [],
				gasName: '',
				yuanp: '',
				price: '',
				priceOfficial:''
			}
		},
		onShow() {
			this.getcode();
		},
		onLoad(option) {
			this.zhid = option.id;
			this.getGasInfoList();
		},
		methods: {
			getGasInfoList() {
				console.log(this.zhid)
				let data = {
					gasIds: this.zhid
				}
				getGasInfoList(data).then(res => {
					this.gasName = res.result[0].gasName;
					this.tabslist = res.result[0].oilPriceList;
					this.price = res.result[0].oilPriceList[0].priceYfq;
					this.yuanp = res.result[0].oilPriceList[0].priceGun;
					this.guylist = res.result[0].oilPriceList[0].gunNos;
					this.priceOfficial = res.result[0].oilPriceList[0].priceOfficial
					this.numlist = res.result[0].oilPriceList;
					this.guynum = this.guylist[0].gunNo;
					this.act2 = this.guylist[0].gunNo;
				})
			},
			tabs(i) {
				this.act1 = i;
				this.guylist = this.tabslist[i].gunNos;
				this.guynum = this.guylist[0].gunNo[0];
				this.act2 = this.guylist[0].gunNo;
				this.price = this.tabslist[i].priceYfq;
				this.yuanp = this.tabslist[i].priceGun;
				this.priceOfficial = this.tabslist[i].priceOfficial;
			},
			tabs2(i) {
				this.act2 = i
			},
			gopay() {
				console.log(this.zhid,this.code,this.guynum)
				// return
				uni.navigateTo({
					url: `./payview?id=${this.zhid}&code=${this.code}&guynum=${this.act2}`
				})
			},
			getcode() {
				getSecretCode().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.code = res.result
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #e7e9ec;
	}

	.confirm {
		width: 100%;
	}

	.top {
		width: 100%;
		background: #FFFFFF;
		padding: 25rpx 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 130rpx;
			height: 130rpx;
			margin-right: 40rpx;
		}

		.top_content {
			height: 130rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name {
				font-size: 32rpx;
			}

			.address {
				color: rgba(0, 0, 0, 0.5);
				font-size: 22rpx;
			}

			.price_box {
				display: flex;
				font-size: 28rpx;

				.vip_price {
					margin-right: 30rpx;
					font-weight: bold;
				}

				.red {
					color: red;
				}

				.nor_price {
					color: rgba(0, 0, 0, 0.5);
					font-size: 11px;
				}
			}
		}
	}

	.content {
		width: 100%;
		background: #FFFFFF;
		padding: 20rpx 30rpx;
		margin-top: 40rpx;

		.title {
			font-size: 34rpx;
		}

		.list {
			padding: 0 40rpx;
			display: flex;
			flex-wrap: wrap;
			text-align: center;

			.item {
				margin-top: 20rpx;
				width: 128rpx;
				height: 44rpx;
				border: 2rpx solid rgba(0, 0, 0, 0.5);
				color: rgba(0, 0, 0, 0.5);
				font-size: 28rpx;
				line-height: 44rpx;
				border-radius: 25rpx;
				margin-right: 5%;
			}

			.act {
				margin-top: 20rpx;
				color: #FFFFFF;
				background: #ED2525;
				width: 132rpx;
				height: 48rpx;
				font-size: 28rpx;
				line-height: 48rpx;
				border-radius: 25rpx;
				margin-right: 5%;
			}
		}
	}

	.btn_box {
		margin-top: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			background: #ED2525;
			color: #FFFFFF;
			width: 190rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			border-radius: 30rpx;
		}
	}
</style>
